<template>
  <div>
    <basic-page-vxe
      ref="basePage"
      list-api="queryFile"
      del-api="deleteFile"
      :search-form="basicData.searchForm"
      :search-handle="basicData.searchHandle"
      :search-other-data="basicData.searchData"
      :columns="basicData.columns"
    />
    <el-dialog :close-on-click-modal="false" title="上传" :visible.sync="dialogFormVisible" width="400px">
      <div>
        <el-upload
          class="upload-demo"
          drag
          :action="uploadAction"
          :headers="uploadHeader"
          :data="uploadData"
          :limit="1"
          :on-success="handleSuccess"
          :on-exceed="handleExceed"
          accept="application/msexcel,application/msword,application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
          :file-list="fileList"
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div slot="tip" class="el-upload__tip">只能上传word/excel/pdf文件</div>
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer" />
    </el-dialog>
  </div>
</template>

<script>
import { downloadFile } from '@/api/file'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
import { saveAs } from 'file-saver'
export default {
  name: '',
  components: {
  },
  directives: {},
  filters: {},
  data() {
    return {
      basicData: {
        columns: [
          { config: { title: '文件名称', field: 'originalFilename' }, type: 'copy' },
          { config: { title: '文件大小（KB）', field: 'fileSize', width: '160' }},
          { config: { title: '数据类型', field: 'contentType' }, type: 'copy' },
          { config: { title: '创建日期', width: '160', field: 'createTime' }, type: 'time' },
          { config: { title: '操作', field: 'opt', width: '180' }, type: 'render',
            render: (h, scope) => {
              return (
                <div>
                  <el-button plain size='mini' type='primary' v-permission="'download'" onClick={() => this.handleDownload(scope.row)}><i class='el-icon-download'></i> 下载</el-button>
                  <el-button plain size='mini' type='danger' v-permission="'delete'" onClick={() => this.$refs.basePage.handleDelete(scope.row)}><i class='el-icon-delete'></i> 删除</el-button>
                </div>
              )
            }
          }
        ],
        searchData: {
          originalFilename: null,
          currentPage: 1,
          pageSize: 10
        },
        searchForm: [
          { type: 'Input', label: '文件名称', prop: 'originalFilename', width: '180px' }
        ],
        searchHandle: [
          { label: '上传', type: 'success', icon: 'el-icon-plus', permission: 'upload', handle: () => { this.handleUpload() } }
        ]

      },
      showDel: false,
      delInfo: {},
      typ: [],
      detail: {},
      roleIdOptions: [],
      orgIdOptions: [],
      orgName: '',
      temp: {
        id: undefined,
        status: 1,
        prefix: '86'
      },
      dialogFormVisible: false,
      downloadLoading: false,
      uploadAction: '/api/file/file/uploadFile',
      uploadHeader: { Authorization: 'Bearer ' + getToken() },
      uploadData: { id: '' },
      fileList: []
    }
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  created() {
    this.uploadData.id = this.id
  },
  mounted() {
  },
  methods: {
    resetTemp() {
      this.temp = {
        id: undefined,
        status: 1,
        prefix: '86'
      }
    },
    handleUpload() {
      this.fileList = []
      this.dialogFormVisible = true
    },
    handleSuccess() {
      this.dialogFormVisible = false
      this.handleReset()
    },
    handleExceed() {
      this.handleWarning('当前限制选择 1 个文件, 您已超出限制')
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.orgName = this.temp.orgIdCn
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleDownload(val) {
      const formData = new FormData()
      formData.append('originalFilename', val.originalFilename)
      formData.append('url', val.url)
      downloadFile(formData).then(response => {
        saveAs(response, val.originalFilename)
      })
    },
    // 刷新
    handleReset() {
      this.$refs.basePage.getList()
    },
    handleWarning(response) {
      this.$notify({
        title: '警告',
        message: response.message,
        type: 'warning',
        duration: 2000
      })
    }
  }
}
</script>

<style scoped>
.warning{
  text-align: center;
  font-size: 20px;
}
.el-icon-info{
  font-size: 30px;
  color: orange;
}
</style>
